<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">

</head>
<body>
    <div class="musicCload-top">
        <div class="top">
            <div class="top-black">
                <div class="warp_01 topbar">
                    <div class="bar-left">
                        <h1 class="log">
                            <a href="">网易云音乐</a>
                        </h1>
                        <ul>
                            <li ><a href="#" class="active">发现音乐</a></li>
                            <li><a href="#">我的音乐</a></li>
                            <li><a href="#">关注</a></li>
                            <li><a href="#">商城</a></li>
                            <li><a href="#">音乐人</a></li>
                            <li><a href="#" class="bar-left-kehuduan">下载客户端</a></li>
                        </ul>
                    </div>
                    <div class="bar-right">
                        <div class="search">
                            <input type="text" placeholder="音乐/视频/电台/用户">
                        </div>
                        <div class="anthor">
                            <a href="#">创作者中心</a>
                        </div>
                        <div class="login">
                            <a href="#">登录</a>
                        </div>
                    </div>
                </div>
            </div>
        
            </div>
            <div class="top-red">
                <div class="warp_01 nav">
                    <ul class="top-red-list">
                        <li><a href="#" class="ative">推荐</a></li>
                        <li><a href="#">排行榜</a></li>
                        <li><a href="#" class="r">歌单</a></li>
                        <li><a href="#">主播电台</a></li>
                        <li><a href="#">歌手</a></li>
                        <li><a href="#">新碟上架</a></li>
                    </ul>
                </div>
            </div>
    </div>
    <div class="banner">
        <div class="banner-main">
            <div class="banner-img">
                <ul class="banner-dian">
              
                </ul>
                <ul class="img-list">
                </ul>
            </div>
        <div class="banner-onload">
            <a href="#"></a>
            <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
        <a class="banner-btn-left">
        </a>
        <a class="banner-btn-right"></a>
    </div>
    </div>
    <div class="cloud-main">
        <div class="area warp_02">
            <div class="area-left">
                <!-- 头部 -->
                <div class="hot-module">
                    <div class="hot-tuijian">
                        <div class="tuijian">
                            <a href="#" class="title">热门推荐</a>
                            <ul>
                                <li>
                                    <a href="">华语</a>
                                    <span class="line">|</span>
                                </li>
                                <li>
                                    <a href="">流行</a>
                                    <span class="line">|</span>
                                </li>
                                <li>
                                    <a href="">摇滚</a>
                                    <span class="line">|</span>
                                </li>
                                <li>
                                    <a href="">民谣</a>
                                    <span class="line">|</span>
                                </li>
                                <li>
                                    <a href="">电子</a>
                                </li>
                            </ul>
                        </div>
                        <span class="more">
                            <a href="">更多</a>
                            <i></i>
                        </span>
                    </div>
                    <!-- 内容 -->
                    <ul class="hot-main">
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text"><i></i>曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text"><i></i>Future Beats ◐ 糟糕，是心肌梗塞的感觉！</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">132323万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <li>
                            <a href="" class="img-main">
                                <img src="./images/陆地太空人.jpg" alt="">
                                <span class="img-cover-text">
                                    <span class="icon-headset"></span>
                                    <span class="icon-count">1万</span>
                                    <span href="" class="play"></span>
                                </span>
                            </a>
                            <a href="" class="text">曾经喜欢你，卑微到尘埃里</a>
                            <a href="" class="imgCover"></a>
                        </li>
                        <!-- 为了防止flex布局导致的最后一列居中设置的两个li -->
                        <li></li>
                        <li></li>

                    </ul>
                </div>
                <div class="newSong-module">
                    <div class="hot-tuijian">
                        <div class="tuijian">
                            <a href="#" class="title">新碟上架</a>
                        </div>
                        <span class="more">
                            <a href="">更多</a>
                            <i></i>
                        </span>
                    </div>
                    <!-- 新碟上架的轮播图 -->
                    <div class="new-song-list">
                        <div class="inner">
                            <div class="roller">
                                <ul class="songp-list">
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="album">
                                            <img src="./images/法老_专辑封面.jpg" alt="">
                                            <div class="cover"></div>
                                            <a href="" class="icon-paly"></a>
                                        </div>
                                        <p>
                                            <a href="" class="song-name">退333323232333333333潮</a>
                                        </p>
                                        <p>
                                            <a href="" class="singer-name">法老</a>
                                        </p>
                                    </li>

                                </ul>
                                <ul class="songp-list">
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </div>
                            <a href="" class="control control-left"></a>
                            <a href="" class="control control-right"></a>
                        </div>
                    </div>
                </div>
                <div class="billboard-module">
                    <div class="hot-tuijian">
                        <div class="tuijian">
                            <a href="#" class="title">榜单</a>
                        </div>
                        <span class="more">
                            <a href="">更多</a>
                            <i></i>
                        </span>
                    </div>
                    <div class="top-main">
                        <dl class="top-item">
                            <dt class="top-header">
                                <div class="header-img">
                                    <img src="./images/飙升榜.jpg" alt="">
                                    <a href="" class="cover"></a>
                                </div>
                                <div class="header-tit">
                                    <h3>飙升榜</h3>
                                    <a href="" class="top-btn top-play"></a>
                                    <a href="" class="top-btn top-add"></a>
                                </div>
                            </dt>
                            <dd>
                                <ol>
                                    <li>
                                        <span class="no">1</span>
                                        <a href="" class="song">大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">2</span>
                                        <a href="" class="song">如果大海能够</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">3</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">4</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">5</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">6</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">7</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">8</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">9</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">10</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="more">
                                            <a href="">查看更多></a>
                                        </div>
                                    </li>
                                </ol>
                            </dd>
                        </dl>
                        <dl class="top-item">
                            <dt class="top-header">
                                <div class="header-img">
                                    <img src="./images/新歌榜.jpg" alt="">
                                    <a href="" class="cover"></a>
                                </div>
                                <div class="header-tit">
                                    <h3>新歌榜</h3>
                                    <a href="" class="top-btn top-play"></a>
                                    <a href="" class="top-btn top-add"></a>
                                </div>
                            </dt>
                            <dd>
                                <ol>
                                    <li>
                                        <span class="no">1</span>
                                        <a href="" class="song">大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">2</span>
                                        <a href="" class="song">如果大海能够</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">3</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">4</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">5</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">6</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">7</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">8</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">9</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">10</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="more">
                                            <a href="">查看更多></a>
                                        </div>
                                    </li>
                                </ol>
                            </dd>
                        </dl>
                        <dl class="top-item">
                            <dt class="top-header">
                                <div class="header-img">
                                    <img src="./images/原创榜.jpg" alt="">
                                    <a href="" class="cover"></a>
                                </div>
                                <div class="header-tit">
                                    <h3>原创榜</h3>
                                    <a href="" class="top-btn top-play"></a>
                                    <a href="" class="top-btn top-add"></a>
                                </div>
                            </dt>
                            <dd>
                                <ol>
                                    <li>
                                        <span class="no">1</span>
                                        <a href="" class="song">大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">2</span>
                                        <a href="" class="song">如果大海能够</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">3</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">4</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">5</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">6</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">7</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">8</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">9</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no">10</span>
                                        <a href="" class="song">爱你爱你爱你爱你爱你爱你爱你爱你大海</a>
                                        <div class="song-btns">
                                            <a href=""></a>
                                            <a href=""></a>
                                            <a href=""></a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="more">
                                            <a href="">查看更多></a>
                                        </div>
                                    </li>
                                </ol>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="area-right">
                <div class="area-login">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="#">用户登录</a>
                </div>
                <div class="settle-singer">
                    <div class="header-small">
                        <h3>入驻歌手</h3>
                        <a href="#">查看更多&gt;</a>
                    </div>
                    <ul>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手2222222222222222张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                    </ul>
                    <a class="apply" href="#">
                        <i class="apply-tent">申请成为网易音乐人</i>
                    </a>
                </div>
                <div class="hot-up">
                    <div class="header-small">
                        <h3>热门主播</h3>
                    </div>
                    <ul>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>男女双人全创作独立乐团</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>32131231313232323232323232323131</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>32131231313232323232323232323131</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>32131231313232323232323232323131</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        <a href="#" class="change-top">
        </a>
        </div>
    </div>
    <div class="musicCload-bottom">
        <div class="botttom-main">
            <div class="bottom-text">
                <p>服务条款&nbsp;|&nbsp;隐私政策&nbsp;|&nbsp;儿童隐私政策&nbsp;|&nbsp;版权投诉&nbsp;|&nbsp;投资者关系&nbsp;&nbsp;|&nbsp;&nbsp;广告合作&nbsp;&nbsp;|&nbsp;&nbsp;廉正举报&nbsp;&nbsp;|&nbsp;联系我们</p>
            <p>网易公司版权所有©1997-2022&nbsp;&nbsp;杭州乐读科技有限公司运营：浙网文[2021] 1186-054号</p>
            <p>粤B2-20090191-18  工业和信息化部备案管理系统网站  <img src="./images/police.png" class="police" alt=""> 浙公网安备 33010902002564号</p>
            <p>互联网宗教信息服务许可证：浙（2022）0000120</p>
            </div>
            <ul>
                <li>
                    <a href=""></a>
                    <span>独立音乐人</span>
                </li>
                <li>
                    <a href=""></a>
                    <span>独立音乐人</span>
                </li>
                <li>
                    <a href=""></a>
                    <span>独立音乐人</span>
                </li>
                <li>
                    <a href=""></a>
                    <span>独立音乐人</span>
                </li>
                <li>
                    <a href=""></a>
                    <span>独立音乐人</span>
                </li>
            </ul>
        </div>
    </div>
    <script src="./js/data.js"></script>
    <script>
        // top显示与隐藏
        window.onscroll = ()=>{
            if(window.scrollY!=0){
                document.querySelector('.change-top').style.display = "flex";
            }else{
                document.querySelector('.change-top').style.display = "none";
            }
        }
        // 轮播图
        const imgList = document.querySelector('.img-list');
        const banner = document.querySelector('.banner');
        const bannerdian = document.querySelector('.banner-dian');
        let red = document.querySelector('.ative');
        const pre = document.querySelector('.banner-btn-left');
        const next = document.querySelector('.banner-btn-right');
        for(let i=0;i<bannerImg.length;i++){
            const li = document.createElement('li');
            const li2 = document.createElement('li');
            li2.dataset.number = i;
            bannerdian.appendChild(li2);
            console.log(bannerdian);
            const img = document.createElement('img');
            img.src = bannerImg[i].img;
            li.appendChild(img);
            imgList.appendChild(li);
        }
        let index = 0;
        let timer;
        bannerChange();
        timer = setInterval(bannerChange,3000);
        next.addEventListener('click',function(){
            bannerChange()
        })
        pre.addEventListener('click',function(){
            bannerChange(1)
        })
        bannerdian.addEventListener('click',function(e){
          if(e.target.tagName =='LI'){
            index = e.target.dataset.number-1;
            bannerChange()
          }  
        })
        function bannerChange(n){
            timer && clearInterval(timer);
            n?index--:index++;
            if(index==imgList.children.length)index=0;
            if(index<0)index=imgList.children.length-1;
            imgList.style.left = `${index*-730}px`
            banner.style.backgroundImage = `url(${bannerImg[index].imgBg})`;
            red.classList.remove('ative');
            bannerdian.children[index].classList.add('ative');
            red = bannerdian.children[index];
            timer = setInterval(bannerChange,3000);
        }

    </script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/page_top.css">
    <link rel="stylesheet" href="./css/page_banner.css">
    <link rel="stylesheet" href="./css/page_main.css">
    <link rel="stylesheet" href="./css/button.css">
    <link rel="stylesheet" href="./css/page_bottom.css">
</body>
</html>